<template>
    <div class="user_wapper">
        <el-row>
  <el-col :span="24">
    <el-card shadow="always">
             <el-row>
  <el-col :span="24">
     <el-input clearable @clear="onclear" placeholder="请输入内容" v-model="Query.query" class="input-with-select">
    <el-button slot="append" icon="el-icon-search" @click="users"></el-button>
  </el-input>
  </el-col>
             </el-row>
             <div class="height"></div>
       <el-table
    :data="tableData"
    border
    style="width: 100%">
    <!-- add_time: 1514345477
cat_id: null
cat_one_id: null
cat_three_id: null
cat_two_id: null
goods_id: 926
goods_name: "【海外购自营】黎珐(ReFa) MTG日本 CARAT铂金微电流瘦脸瘦身提拉紧致V脸美容仪 【保税仓发货】"
goods_number: 100
goods_price: 1399
goods_state: 0
goods_weight: 100
hot_mumber: 0
is_promote: false
upd_time: 1514345477 -->
    <el-table-column

      prop="goods_id"
      label="商品id"
      width="100">
    </el-table-column>
    <el-table-column
      prop="goods_name"
      label="商品名称"
      show-overflow-tooltip  >
    </el-table-column>
    <el-table-column
      prop="goods_price"
      label="价格">
    </el-table-column>
       <el-table-column
      prop="goods_number"
      label="数量">
    </el-table-column>
        <el-table-column
      prop="goods_weight"
      label="重量">
    </el-table-column>
        <el-table-column
      prop="goods_state"
      label="状态">
      <template slot-scope="row">
            <div v-if="row.row.goods_state==0">
                    未通过
            </div>
              <div v-if="row.row.goods_state==1">
                    审核中
            </div>
              <div v-if="row.row.goods_state==2">
                    已审核
            </div>
      </template>
    </el-table-column>
         <el-table-column
      prop="add_time"
      label="添加时间">
    </el-table-column>
         <el-table-column
      prop="upd_time"
      label="更新时间">
    </el-table-column>
         <el-table-column
      prop="hot_mumber"
      label="热销品数量">
    </el-table-column>
       <el-table-column
      prop="is_promote"
      label="是否是热销品">
    </el-table-column>
    
       <el-table-column
      label="操作" width="200">
     <template slot-scope="row">
         <el-button type="primary" size="mini">修改</el-button>
  <el-button type="danger" @click="ondel(row)" size="mini">删除</el-button>
     </template>
    </el-table-column>
    
    
  </el-table>
<div class="pagination">


  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="Query.total">
    </el-pagination>
    </div>
    </el-card>
  </el-col>
        </el-row>  
    </div>
</template>
<script>
export default {
     created(){
         this.users()
    },
    mounted(){

    },
    data (){
        return {
            Query:{
                query:"",
                pagenum:1,
                pagesize:10,
                total:0
            },
            tableData:[]
        }
    },
    // 方法
    methods:{
        users(){
             this.$http
        .usergoods({
            params:this.Query
        })
        .then(res => {
          if (res.meta.status == 200) {
              console.log(res);
              
              this.tableData=res.data.goods;
              this.Query.total=res.data.total
          } else {
            this.$message.error(res.meta.msg);
          }
        })
        .catch(res => {
          console.log(res);

          this.$message.error("网络错误");
        });
        },
        onchange(row){
               this.$http
        .usersState(row.row.id,row.row.mg_state,{})
        .then(res => {
          if (res.meta.status == 200) {
                this.$message.success(res.meta.msg);
                    this.users()
          } else {
            this.$message.error(res.meta.msg);
          }
        })
        .catch(res => {
          console.log(res);

          this.$message.error("网络错误");
        });
            
        },
        // 点击了删除
        ondel(row){
            this.$confirm('确定删除管理员吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        this.$http
        .usersdelete(row.row.id,{})
        .then(res => {
          if (res.meta.status == 200) {
                this.$message.success(res.meta.msg);
                    this.users()
          } else {
            this.$message.error(res.meta.msg);
          }
        })
        .catch(res => {
          console.log(res);

          this.$message.error("网络错误");
        });
        }).catch(() => {
                 
        });
              
               
        },
        onclear(){
             this.users()
        },
        handleSizeChange(e){
            this.Query.pagesize=e
              this.users()
        },
        handleCurrentChange(e){
             this.Query.pagenum=e
              this.users()
            
        }
      
    },
    //计算属性
    computed:{

    },
    // 监听属性
    watch:{

    },
    // 组件注册
    components:{

    },
    // 组件销毁之前
    beforeDestroy(){

    }

   
}
</script>
<style lang="less" scoped>
.user_wapper{
    height: 100%;
    width: 100%;
    .input-with-select{
            width:30%;
    }
}
</style>